<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

    <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>
    <!-- 通过v-if和v-else实现组件的切换 但是局限是两个组件的切换 -->
    <!-- <div id="app">
        <a href="" @click.prevent="flag = true">登录</a><a href="" @click.prevent="flag = false">注册</a>
        <br />
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div> -->
    <!-- Vue提供了:is Component组件名称 来解决上述只能两个组件切换的问题 -->
    <div id="app">
        <a href="" @click.prevent="componentId='login'">登录</a><a href="" @click.prevent="componentId='register'">注册</a>
        <br />
        <transition mode="out-in">
            <component :is="componentId"></component>
        </transition>

    </div>

    <template id="ltem">
        <div>
            <label>name:<input type="text" v-model="name"></label>
            <br />
            <label>password:<input type="text" v-model="password"></label>
        </div>
    </template>
    <template id="rtem">
        <div>
            <label>name:<input type="text" v-model="name"></label>
            <br />
            <label>password:<input type="text" v-model="password"></label>
        </div>
    </template>
    <script>
        //vue组件的data必须为一个方法 并且方法必须返回一个对象
        Vue.component('login', {
            template: '#ltem',
            data: function () {
                return {
                    name: '登录',
                    password: '登录'
                }
            }
        })
        Vue.component('register', {
            template: '#rtem',
            data: function () {
                return {
                    name: '注册',
                    password: '注册'
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                componentId: 'login'
            },
            methods: {

            },
            directives: {

            },
            filters: {

            }
        })
    </script>
</body>

</html>